<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智慧社区后台</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/plugins/bootstrap-table/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-switch/css/bootstrap-switch.min.css" />
</head>
<style>
.mian{
	width: 100%; 
	height: 100%;
	padding: 20px 20px;
}
.crow{
	padding-top:5px;
	padding-bottom:5px;
	width: 100%; 
	height: 90px;
	margin:auto;
}
.crow div{
	float: left;
}
.region{
	border-bottom:1px solid gray;
	width: 12%;
	height: 80px;
	margin-right:5px;
	text-align:center;
 	position:relative 
}
.region p{
	position:absolute;
 	bottom:0px;
 	padding:0px;
 	margin:0px;
 	font-size:22px;
 	font-weight:bold;
}
.free_space{/* 空闲 */
	border: 1px dashed black;
	background-color:#EBEBEB;
	width: 12%;
	height: 80px;
	padding-top: 8px;
	padding-left: 8px;
}
.let_space{/* 出租*/
	border: 1px dashed black;
	background-color:#BCEE68;
	width: 12%;
	height: 80px;
	padding-top: 8px;
	padding-left: 8px;
}
.sale_space{/* 出售*/
	border: 1px dashed black;
	background-color:#EEAD0E;
	width: 12%;
	height: 80px;
	padding-top: 8px;
	padding-left: 8px;
}
.f_space{
	width: 12%;
	height: 80px;
	margin-right:5px;
	text-align:center;
 	position:relative 
}
.adr{
	width: 0.5%;
	height: 80px;
}
.s1{
	font-size:16px;
}
.s2{
	font-size:12px;
}
</style>
<body style="width: 100%; height: 100%;padding-bottom: 90px; background-color: #ECF0F5;">
	<div class="mian" id="space">
		<!-- <div class="crow">
			<div class="region">
				<p>a</p>
			</div>
			<div class="let_space">
				<span class="s1">111</span><br/>
				<span class="s2">23m</span><br/>
				<span class="s2">空闲</span><br/>
			</div>
			<div class="adr"></div>
			<div class="sale_space">
				<span class="s1">111</span><br/>
				<span class="s2">23m</span><br/>
				<span class="s2">空闲</span><br/>
			</div>
			<div class="adr"></div>
			<div class="free_space">
				<span class="s1">111</span><br/>
				<span class="s2">23m</span><br/>
				<span class="s2">空闲</span><br/>
			</div>
			<div class="adr"></div>
			<div class="let_space">
				<span class="s1">111</span><br/>
				<span class="s2">23m</span><br/>
				<span class="s2">空闲</span><br/>
			</div>
			<div class="adr"></div>
			<div class="sale_space">
				<span class="s1">111</span><br/>
				<span class="s2">23m</span><br/>
				<span class="s2">空闲</span><br/>
			</div>
			<div class="adr"></div>
			<div class="free_space">
				<span class="s1">111</span><br/>
				<span class="s2">23m</span><br/>
				<span class="s2">空闲</span><br/>
			</div>
			<div class="adr"></div>
			<div class="free_space">
				<span class="s1">111</span><br/>
				<span class="s2">23m</span><br/>
				<span class="s2">空闲</span><br/>
			</div>
		</div> -->
		
	</div>
</body>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-export.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/tableExport.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-toolbar.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-filter-control.js"></script>
<script src="${pageContext.request.contextPath}/js/date.js"></script>
<!-- layer -->
<script src="${pageContext.request.contextPath}/plugins/layer/2.4/layer.js"></script>
<script>
	$(function(){
		selectParkingCharts();
	});
	
	function selectParkingCharts(){
		$.ajax({
			url : "${pageContext.request.contextPath}/selectParkingChart",
			type : "post",
			dataType : "json",
			success : function(data) {
				if(data.result == 1){
					var html = '';
					var list = data.list;
					list.forEach(function(v){  
						html += '<div class="crow"><div class="region"><p>'+v.regionName+'</p></div>';
						html += initSpace(v.space);
						html += '</div>';
					});
					$("#space").html(html);
					console.log(html);
				}else{
					
				}
				
			}
		});
	}
	
	function initSpace(array){
		console.log(array);
		var html = '';
		for (var i = 0; i < array.length; i++) {  
			if(i != 0 && (i%7)==0){
				html += '<div class="crow"><div class="f_space"></div>'
			}
			var space=array[i];
			console.log(space);
			if(space.state == 0){
				html += '<div class="free_space"><span class="s1">'+space.number+'</span><br/>';
				html += '<span class="s2">'+(space.licensePlate==null?'--':space.licensePlate)+'</span><br/><span class="s2">出租</span><br/></div>';
			}else if(space.state == 1){
				html += '<div class="let_space"><span class="s1">'+space.number+'</span><br/>';
				html += '<span class="s2">'+(space.sellPrice==null?'--':space.sellPrice)+'</span><br/><span class="s2">空闲</span><br/></div>';
			}else if(space.state == 2){
				html += '<div class="sale_space"><span class="s1">'+space.number+'</span><br/>';
				html += '<span class="s2">'+(space.licensePlate==null?'--':space.licensePlate)+'</span><br/><span class="s2">出售</span><br/></div>';
			}
			if((i%7)!=6){
				html += '<div class="adr"></div>';
			}
	    } 
		return html;
	}
</script>
</html>
